<template>
  <div id="app">
		<el-container style="height: 100%;" v-if="user">
				<el-header>
					<div class="logo">
						 Xadminnns
					</div>
					<div class="nav">
						<el-button type="text" icon="el-icon-d-arrow-lefts">收起</el-button>
					</div>
				</el-header>
				
				<el-container>
					<el-aside width="200px" style="background-color: #545c64;">
							<el-menu
								default-active="/"
								class="el-menu-vertical-demo"
								@open="handleOpen"
								@close="handleClose"
								background-color="#545c64"
								text-color="#fff"
								router
								active-text-color="#ffd04b">
								<el-submenu index="1">
									<template slot="title">
										<i class="el-icon-location"></i>
										<span>控制面板</span>
									</template>
									<el-menu-item-group title="商城数据">
										<el-menu-item index="/">选项1</el-menu-item>
										<el-menu-item index="/login">选项2</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="社区数据">
										<el-menu-item index="1-3">选项3</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="数据分析">
										<el-menu-item index="1-3">选项3</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="服务器信息">
										<el-menu-item index="1-3">选项3</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-menu-item index="2">
									<i class="el-icon-menu"></i>
									<span slot="title">系统管理</span>
								</el-menu-item>
								<el-menu-item index="3">
									<i class="el-icon-document"></i>
									<span slot="title">社区管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">商城管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">微信管理</span>
								</el-menu-item>
							</el-menu>
					</el-aside>
					
					<el-main>
						<el-breadcrumb separator="/">
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
							<el-breadcrumb-item>活动列表</el-breadcrumb-item>
							<el-breadcrumb-item>活动详情</el-breadcrumb-item>
						</el-breadcrumb>
						<router-view/>
						
						</el-main>
					
				</el-container>
				
		</el-container>
		
		<el-container style="height: 100%;" v-else>
			<router-view/>
		</el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      user: false
    }
  },
  created: function(){
	  
  },
	methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>
<style>
@import "../static/css/font/font.css";

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
	height: 100%;
  /* margin-top: 60px; */
}
.el-menu-vertical-demo{
	text-align: left;
}
.logo{
	width: 200px;
	background-color: #FFF;
	height: 60px;
	line-height: 60px;
	font-size: 20pt;
	color: #545c64;
	font-weight: 700;
	float: left;
}
.nav{
	float: left;
	line-height: 60px;
	
}
.el-header{
	background-color: #fff;
	border-bottom: 1px solid #e6e6e6;
	box-sizing: border-box;
	padding: 0;
}
.el-breadcrumb{
	margin-bottom: 20px;
}
</style>
